<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="../layui-v2.6.8/layui/css/layui.css">
    <style>
        body {
            padding: 20px;
        }

        .layui-form-item .layui-input-block {
            width: 50%;
        }
    </style>
</head>

<body>
<form class="layui-form" action="" lay-filter="console">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>控制台</legend>
    </fieldset>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">直播推流</label>
            <div class="layui-input-block">
                <input type="checkbox" name="live_switch" lay-filter="live_switch" lay-skin="switch" lay-text="ON|OFF">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">激光点云</label>
            <div class="layui-input-block">
                <input type="checkbox" name="laser_switch" lay-filter="laser_switch" lay-skin="switch"
                       lay-text="ON|OFF">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">图像识别</label>
            <div class="layui-input-block">
                <input type="checkbox" name="recognition_switch" lay-filter="recognition_switch" lay-skin="switch"
                       lay-text="ON|OFF">
            </div>
        </div>
    </div>
</form>

<form class="layui-form" action="" lay-filter="example">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>摄像机设置</legend>
    </fieldset>
    <div class="layui-form-item">
        <label class="layui-form-label">rtmp地址</label>
        <div class="layui-input-block">
            <input type="text" name="rtmp" lay-verify="title" autocomplete="off" placeholder="请输入标题"
                   class="layui-input">
            <input type="text" name="cameraId" lay-verify="title" autocomplete="off" placeholder="请输入标题"
                   class="layui-input" style="display: none">
            <input type="text" name="cameraName" lay-verify="title" autocomplete="off" placeholder="请输入标题"
                   class="layui-input" style="display: none">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">分辨率</label>
        <div class="layui-input-block">
            <select name="resolution" lay-filter="aihao">
                <option value=""></option>
                <option value="640*480">640*480</option>
                <option value="1920*1080">1920*1080</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">帧率</label>
        <div class="layui-input-block">
            <select name="frameRate" lay-filter="aihao">
                <option value=""></option>
                <option value="20">20</option>
                <option value="25">25</option>
                <option value="30">30</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <!--            <button type="button" class="layui-btn layui-btn-normal" id="LAY-component-form-setval">赋值</button>-->
            <button type="button" class="layui-btn layui-btn-normal" id="LAY-component-form-getval">立即提交</button>
            <!--            <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>-->
        </div>
    </div>
</form>
<script src="../layui-v2.6.8/layui/layui.js"></script>
<script src="../js/jquery-1.10.2/jquery-1.10.2.js" type="text/javascript" charset="utf-8"></script>
<script>
    //JS
    var layer, form, $;
    var cameraId;
    layui.use(['layer', 'form'], function () {
        form = layui.form;
        layer = layui.layer;
        $ = layui.$;

        //确认提交
        layui.$('#LAY-component-form-getval').on('click', function () {
            var data = form.val('example');
            // alert(JSON.stringify(data));
            $.ajax({
                type: "GET",
                url: "/Camera/updateCamera",
                data: data,
                dataType: "json",
                success: function (data) {
                    if (data.message.data == 1) {
                        layer.msg("修改成功");
                    } else {
                        layer.msg("修改失败");
                    }
                    // console.log(data)
                }
            });
        });

        form.on('switch(live_switch)', function (data) {
            let checked = data.elem.checked == true ? false : true;
            $.ajax({
                type: "GET",
                url: "/Switch/rtmpLive?cameraId=" + cameraId + "&checked=" + data.elem.checked,
                dataType: "json",
                success: function (data) {
                    if (data.message.data == true) {
                        layer.msg("修改成功");
                    } else {
                        form.val('console', {
                            "live_switch": checked
                        });
                        layer.msg("修改失败");
                    }
                }
            });
        });
        form.on('switch(laser_switch)', function (data) {
            let checked = data.elem.checked == true ? false : true;
            $.ajax({
                type: "GET",
                url: "/Switch/laserSwitch?cameraId=" + cameraId + "&checked=" + data.elem.checked,
                dataType: "json",
                success: function (data) {
                    if (data.message.data == true) {
                        layer.msg("修改成功");
                    } else {
                        form.val('console', {
                            "laser_switch": checked
                        });
                        layer.msg("修改失败");
                    }
                }
            });
        });
        form.on('switch(recognition_switch)', function (data) {
            let checked = data.elem.checked == true ? false : true;
            $.ajax({
                type: "GET",
                url: "/Switch/recognitionSwitch?cameraId=" + cameraId + "&checked=" + data.elem.checked,
                dataType: "json",
                success: function (data) {
                    if (data.message.data == true) {
                        layer.msg("修改成功");
                    } else {
                        form.val('console', {
                            "recognition_switch": checked
                        });
                        layer.msg("修改失败");
                    }
                }
            });
        });
    });

    window.onload = myfun;

    function myfun() {
        $.ajax({
            type: "GET",
            url: "/Camera/getCamera",
            dataType: "json",
            success: function (data) {
                // console.log(data.message.data)
                form.val('example', {
                    "rtmp": data.message.data.rtmp,
                    "resolution": data.message.data.resolution,
                    "frameRate": data.message.data.frameRate,
                    "cameraId": data.message.data.cameraId,
                    "cameraName": data.message.data.cameraName
                });
                cameraId = data.message.data.cameraId;

                $.ajax({
                    type: "GET",
                    url: "/Switch/allSwitch?cameraId=" + cameraId,
                    dataType: "json",
                    success: function (data) {
                        console.log(data.message.data.laserSwitch);
                        form.val('console', {
                            "live_switch": eval(data.message.data.rtmpLive.toLowerCase()),
                            "laser_switch": eval(data.message.data.laserSwitch.toLowerCase()),
                            "recognition_switch": eval(data.message.data.recognitionSwitch.toLowerCase())
                        });
                    }
                });

            }
        });


    }

</script>
</body>
</html>
